import React, { Component } from "react";
import { Stepper, Toast, Empty } from "antd-mobile";
import * as service from "../../api/index";
import "../../styles/Car.scss";
import Linklist from "../../components/Linklist";
import store from "../../store";
class Car extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      checked: true,
      sum: 0,
    };
  }

  async componentDidMount() {
    var res = await service.cart_list({
      userid: localStorage.getItem("userid"),
    });
    if (this.state.checked) {
      this.state.sum = res.data.data.reduce(function (sum, item) {
        return (sum += parseInt(item.num * item.originprice));
      }, 0);
    }
    this.setState({
      list: res.data.data,
      sum: this.state.sum,
      [res.data.data.flat]: this.state.checked,
    });
    // this.setState({ checked: res })
    //   //如果数组中的flag都是选中，那么全选也就是选中状态
  }

  //去商品详情页面

  // 计算总价
  zongjia(value) {
    if (this.state.checked && this.state.list.flag) {
      this.setState({ sum: 0 });
    } else {
      this.state.sum = this.state.list.reduce(function (sum, item) {
        return (sum += parseInt(value * item.originprice));
      }, 0);
      this.setState({ sum: this.state.sum });
    }
  }

  //更新购物车
  async gengxin(item, value) {
    var res = await service.updatenum_list({ cartid: item.cartid, num: value });

    if (value == 0) {
      var res = await service.remove_list({ cartid: item.cartid });
      var res = await service.cart_list({
        userid: localStorage.getItem("userid"),
      });

      if (res.data.data) {
        this.setState({ list: res.data.data });
      } else {
        this.setState({ list: [] });
      }
    }
  }

  //点击购物车添加
  componentDidUpdate() {}

  //点击购买提交购物车

  // hotword_deleteCartItem
  async clear_Car() {
    this.props.history.push("/querenDingdan");
    //把time创建时间添加到状态管理里面
  }
  //去分类页面
  fenlei() {
    this.props.history.push("/index/Fenlei");
  }
  render() {
    return (
      <div className="Car">
        <header>购物车({this.state.list ? this.state.list.length : 0})</header>
        <div className="list">
          {this.state.list.length !== 0 ? (
            this.state.list.map((item, index) => {
              return (
                <div className="item" key={item.proid}>
                  <div className="item_top">
                    <input
                      type="checkbox"
                      checked={item.flag}
                      onChange={() => {
                        this.handleChange(item);
                      }}
                    />
                    <img src={item.img1} alt="" />
                    <p>{item.proname}</p>
                  </div>
                  <div className="right">
                    <div>{item.originprice}元</div>

                    <Stepper
                      disabled={!item.flag}
                      defaultValue={item.num}
                      min={0}
                      onChange={(value) => {
                        this.zongjia(value);

                        this.gengxin(item, value);
                      }}
                    />
                  </div>
                </div>
              );
            })
          ) : (
            <div className="kong">
              <Empty
                style={{ padding: "64px 0" }}
                imageStyle={{ width: 128 }}
                description="购物车空空如也"
              />
              <div
                onClick={() => {
                  this.fenlei();
                }}
                className="gouwu"
              >
                立即去购物
              </div>
            </div>
          )}

          <div className="buttom">
            <input
              type="checkbox"
              checked={this.state.checked}
              onChange={() => {
                this.quanxuan();
              }}
            />
            <p>总价：{this.state.sum}</p>
            <div
              onClick={() => {
                this.clear_Car();
              }}
              className="goumai"
            >
              立即购买
            </div>
          </div>
        </div>
        <Linklist ref="footer" Car={this}></Linklist>
      </div>
    );
  }

  quanxuan() {
    this.setState({ checked: !this.state.checked });

    if (this.state.checked) {
      this.setState({ sum: 0 });
      this.state.list.forEach((i, index) => (i.flag = false));
    } else {
      this.state.list.forEach((i, index) => (i.flag = true));
      this.state.sum = this.state.list.reduce(function (sum, item) {
        return (sum += parseInt(item.num * item.originprice));
      }, 0);
      this.setState({ sum: this.state.sum });
    }
  }

  //根据全选checkbox的选中状态设置其他选项的选中状态
  async handleChange(item) {
    item.flag = !item.flag;

    var res = await service.cart_selectone({
      cartid: item.cartid,
      flag: item.flag,
    });

    var res = this.state.list.every((i) => {
      if (!i.flag) {
        return false;
      }
      return true;
    });
    if (!res) {
      this.state.sum = this.state.list.reduce(function (sum, item, index) {
        if (item.flag) {
          sum += parseInt(item.num * item.originprice);
        }
        return sum;
      }, 0);
    } else {
      this.state.sum = this.state.list.reduce(function (sum, item) {
        return (sum += parseInt(item.num * item.originprice));
      }, 0);
      // this.setState({sum:this.state.sum})
    }

    // 每点击一次state更新一次
    this.setState({
      list: this.state.list,
      [this.state.list.flag]: item.flag,
      checked: res,
    });
  }
}

export default Car;
